<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人主页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<link rel="stylesheet" href="swiper-5.0.3/swiper-master/package/css/swiper.min.css" />
		<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/new_file.css" />
	</head>

	<body>
		<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<!--头部-->
					<header>
						<nav class="navbar navbar-expand-lg navbar-light">
							<a class="navbar-brand" href="#">
								<img src="img/logo.jpg" alt="" />
								<p>zhangxiaohan</p>
								<p>个人主页</p>
							</a>
							<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

							<div class="collapse navbar-collapse" id="navbarSupportedContent">
								<div class="mr-auto"></div>
								<form class="form-inline">
									<ul>
										<li>
											<a href="#">首页</a>
										</li>
										<li>
											<a href="#">我的简历</a>
										</li>
										<li>
											<a href="#">我的UI</a>
										</li>
										<li>
											<a href="#">javascript</a>
										</li>
										<li>
											<a href="#">作品展示</a>
										</li>
										<li>
											<a href="#">博客</a>
										</li>
										<li>
											<a href="#">前端导航</a>
										</li>
										<li>
											<a href="#">浏览器中心</a>
										</li>
									</ul>
								</form>
							</div>
						</nav>
						<div class="header_line">
							<img src="img/logo.jpg" />
							<p>人生就像是一道坡，只有不懈攀登，才能到达顶坡，实现自我的最高价值！</p>
							<p>我叫张笑晗</p>
							<p>19岁</p>
							<p>学生</p>
							<p>手机：13171868227</p>
							<p>QQ：3133882452</p>
						</div>
					</header>
				</div>
				<div class="swiper-slide">
					<!--关于我-->
					<div class="about">
						<h2>关于我</h2>
						<p>-ABOUT ME-</p>
						<div class="me">
							<ul>
								<li>
									<img src="img/education.png" /><br />
									<span>学历</span>
									<span></span>
									<span>大专</span>
								</li>
								<li>
									<img src="img/age.png" /><br />
									<span>年龄</span>
									<span></span>
									<span>19</span>
								</li>
								<li>
									<img src="img/location.png" /><br />
									<span>籍贯</span>
									<span></span>
									<span>河北邯郸</span>
								</li>
								<li>
									<img src="img/status.png" /><br />
									<span>目前</span>
									<span></span>
									<span>学生</span>
								</li>
							</ul>
							<div class="me_line">
								<p>有较强的逻辑思维能力、善于分析、归纳</p>
								<p>活泼开朗、乐观向上、诚实守信、适应能力强</p>
								<p>工作认真细致、有责任心、待人热情真诚</p>
								<p>良好的敬业精神，能够吃苦耐劳及承受工作压力</p>
							</div>
						</div>

					</div>

				</div>
				<div class="swiper-slide">
					<!--专业技能-->
					<div class="skill">
						<h2>专业技能</h2>
						<p>-SKILL-</p>
						<p>IT技术的学习需要持之以恒，对知识的认识深度与广度都很重要。对于前端而言更是如此，近几年前端框架层出不穷，前端技术已经从单纯的静态页面开发慢慢变成mvc、mvvc等架构开发，前端工程师正在渐渐向全栈工程师转变，前端开发的重中之重依然是javascript脚本的理解与应用，目前正在不断深入学习javascript知识。</p>
						<ul>
							<li>
								<img src="img/html.png" />
								<p>HTML</p>
								<img src="img/skill_flag.png" alt="" />
							</li>
							<li>
								<img src="img/html.png" />
								<p>CSS</p>
								<img src="img/skill_flag.png" alt="" />
							</li>
							<li>
								<img src="img/html.png" />
								<p>JavaScript</p>
								<img src="img/skill_flag.png" alt="" />
							</li>
							<li>
								<img src="img/html.png" />
								<p>Skill</p>
								<img src="img/skill_flag.png" alt="" />
							</li>
						</ul>
					</div>
				</div>
				<div class="swiper-slide">
					<!--专业技能-->
					<div class="skil">
						<h2>专业技能</h2>
						<p>-SKILL-</p>
						<ul>
							<li>
								<p>
									<span class="span">HTML</span>
									<span>
										<span>95%</span>
									</span>
								</p>
								<p>
									<span>深刻理解web标准，熟悉html5新标签语意，能合理利用语意标签布局页面；</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">CSS</span>
									<span>
										<span>90%</span>
									</span>
								</p>
								<p>
									<span>熟悉css3新特性属性及相关用法，有一定开发经验；了解css预编译语言less/sass；</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">JavaScript</span>
									<span>
										<span>70%</span>
									</span>
								</p>
								<p>
									<span>熟悉JavaScript编程语言</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">JQuery</span>
									<span>
										<span>85%</span>
									</span>
								</p>
								<p>
									<span>熟练掌握jquery开发页面特效，提高页面开发效率；</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">Zepto</span>
									<span>
										<span>75%</span>
									</span>
								</p>
								<p>
									<span>熟练掌握zepto开发页面特效，提高页面开发效率(主要应用在移动端)；</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">Vue.js</span>
									<span>
										<span>50%</span>
									</span>
								</p>
								<p>
									<span>正在学习(暂无开发经验)；</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">Ajax</span>
									<span>
										<span>75%</span>
									</span>
								</p>
								<p>
									<span>熟悉JavaScript、Ajax、DOM等前端技术，熟练应用ajax技术与后端进行交互处理；</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">Bootstrap</span>
									<span>
										<span>80%</span>
									</span>
								</p>
								<p>
									<span>熟练掌握Bootstrap框架及源码的使用方法；</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">Swiper</span>
									<span>
										<span>70%</span>
									</span>
								</p>
								<p>
									<span>熟练使用Swiper框架开发页面动画效果，有一定开发经验；</span>
								</p>
							</li>
							<li>
								<p>
									<span class="span">php</span>
									<span>
										<span>30%</span>
									</span>
								</p>
								<p>
									<span>熟练使用php语句；</span>
								</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="swiper-slide">
					<!--联系我-->
					<div class="contact">
						<h2>联系我</h2>
						<p>CONTACT ME</p>
						<div class="contact_line">
							<ul>
								<li>
									<h1>灵感</h1>
								</li>
								<li>
									<h1>代码</h1>
								</li>
								<li>
									<h1>梦想</h1>
								</li>
								<li>
									<h1>未来</h1>
								</li>
							</ul>
							<ul class="line">
								<li>
									<h1>INSPIRATION</h1>
								</li>
								<li>
									<h1>CODE</h1>
								</li>
								<li>
									<h1>DREAM</h1>
								</li>
								<li>
									<h1>FUTURE</h1>
								</li>
							</ul>
							<p>互联网是个奇妙的行业,</p>
							<p>身为前端工程师，更贴近用户，这种体验非常妙</p>
							<p>我热爱互联网，更热爱互联网前端技术，</p>
							<p>三人行，必有我师焉，</p>
							<p>让我们在互联网的浪潮里一起不断成长！</p>
							<p>手机：13171868227</p>
							<p>QQ:313882452</p>
						</div>
					</div>
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>

		<script src="swiper-5.0.3/swiper-master/package/js/swiper.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
		<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script src="js/new_file.js"></script>
	</body>

</html>